﻿@{
    ViewBag.Title = "Index";
}

<h2>使用jquery模版加载页面</h2>
<br />
jquery模版绑定参考: <a href="https://gitee.com/sundayisblue/jquery-tmpl" target="_blank">https://gitee.com/sundayisblue/jquery-tmpl</a>
<br />
jq分页控件参考: <a href="https://jqpaginator.keenwon.com/" target="_blank">https://jqpaginator.keenwon.com/</a>
<br />
<br />
<div>
    <table width="1000px" id="infoDiv">
        <tr>
            <td>行号</td>
            <td>标题</td>
            <td>内容</td>
            <td>年龄</td>
            <td>年龄 +1 </td>
            <td>标签</td>
            <td>标签2</td>
        </tr>
    </table>
</div>
<div class="paging reppag">
    <div class="pagcenter" id="paging">
        @*<a href="##">首页</a>
            <a href="##">上一页</a>
            <a href="##" class="visited">1</a>
            <a href="##">下一页</a>
            <a href="##">末页</a>
            <input class="paginput" type="text">
            <a href="##">GO!</a>*@
    </div>
</div>
<style>
    .redclass {
        color: red
    }
</style>


@section scripts
{
    <script src="~/Scripts/jq-paginator.min.js"></script>
    <script src="~/Scripts/jquery.tmpl.min.js"></script>
    <script>
        var totalPages = 0;
        $(function () {
            $("#paging").jqPaginator({
                totalPages: 100,
                visiblePages: 10,
                currentPage: 1,
                visiblePages: 5,
                activeClass: 'visited',
                prev: '<a href="javascript:void(0);">上一页<\/a>',
                next: '<a href="javascript:void(0);">下一页<\/a>',
                page: '<a href="javascript:void(0);">{{page}}<\/a>',
                onPageChange: function (n) {
                    showInfo(n, false);
                }
            })
            showInfo(1);
        });

        function showInfo(index) {
            var par = JSON.stringify({ title: "", pageIndex: index ,pageSize:10});
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetPageData")',
                data: par,
                async: false,
                contentType: "application/json",
                dataType: "json",
                success: function (res) {
                    console.log('res', res);
                    totalPages = res.TotalPages;
                    if (res.TotalPages == 0) {
                        $("#infoDiv").html('<div class="cline"><div class="details">您搜索的内容不存在！</div></div>');
                        $('#paging').hide();                        
                        return
                    } else {
                        $("#infoDiv").html('');
                        $('#paging').show();

                        $('#paging').jqPaginator('option', { totalPages: res.TotalPages, currentPage: index });
                        $("#infoDiv").append($("#infoTemplate").tmpl(res.List));
                    }

                }
            });

        }
    
    </script>

    <script id="infoTemplate" type="text/x-jquery-tmpl">
        {{if Age%2==0}}
        <tr class="redclass">
            {{else}}
        <tr>
            {{/if}}
            <td>${$index+1}</td>
            <td>${Title}</td>
            <td>${Info}</td>
            <td>${Age}</td>
            <td>${Age+1}</td>
            <td>
                {{each(i,tab) Tabs}}
                ${i+1} ${tab} ;
                {{/each}}
            </td>
            <td>
                {{each TabStrings.split(',')}}
                ${$index} ${TabStrings.split(',')[$index]} (${$value});
                {{/each}}
            </td>
        </tr>
    </script>
}
